<template>
	<div class="MyShare">
		<v-header></v-header>
		<div class="card">
			<div class="card-title">
				<div class="card-title-left"><span class="one">1</span></div>
				<div>{{$t("my.WebRec")}}</div>
			</div>
			<div class="card-content">
				<input type="text" name="pcUrl" id="pcUrl" placeholder="" v-model="pcUrl"/>
				<mt-button type="primary" size="normal" plain @click.native="copyPCUrl">{{$t("my.CopyUrl")}}</mt-button>
			</div>
		</div>
		<div class="card">
			<div class="card-title">
				<div class="card-title-left">
					<span class="two">2</span>
				</div>
				<div>{{$t("my.AppRec")}}</div>
			</div>
			<div class="card-content">
				<input type="text" name="" id="" placeholder="待开放.....敬请关注！" v-model="appUrl" disabled="disabled"/>
				<mt-button type="primary" size="normal" plain @click.native="copyAppUrl">{{$t("my.CopyInvitationCode")}}</mt-button>
			</div>
		</div>
		<div class="card">
			<div class="card-title">
				<div class="card-title-left">
					<span class="three">3</span>
				</div>
				<div>{{$t("my.CodeRegistration")}}</div>
			</div>
			<div id="myQrcode" class="card-content"></div>
		</div>
	</div>
</template>
<style>
	.MyShare{margin-top: 5rem;}
	.mint-badge.is-size-small {border-radius:50%}
	.MyShare .card-title-left{width: 0;height: 0;border-top: 30px solid #4e8bfe;border-right: 30px solid transparent;margin-right: 10px;}
	.MyShare .card-title-left .one{position: absolute;font-size: 1.2rem;color:#FFFFFF;top: 73px;left: 25px;}
	.MyShare .card-title-left .two{position: absolute;font-size: 1.2rem;color:#FFFFFF;top: 245px;left: 25px;}
	.MyShare .card-title-left .three{position: absolute;font-size: 1.2rem;color:#FFFFFF;top: 418px;left: 25px;}
	.MyShare input {
		line-height: 21px;
		width: 90%;
		height: 40px;
		margin-bottom: 15px;
		padding: 0 15px;
		-webkit-user-select: text;
		border: 1px solid rgba(0, 0, 0, .2);
		outline: 0;
		background-color: #fff;
		-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;
		-webkit-appearance: none
	}
	.MyShare input:focus{border: 1px solid #007AFF;}
	.MyShare .card-content img{width: 150px;height: 150px;}
	.MyShare .mint-button {height: 30px;font-size: 1.2rem;}
	.MyShare .mint-button--primary.is-plain {background-color: #4e8bfe;color: #FFFFFF;}
</style>
<script>
	import router from './../../router';
    import util from './../../js/util/util.js'; 
    import vHeader from './../common/Header.vue';
    import QRCode from 'qrcodejs2'
    import{Cell,Toast} from 'mint-ui';
    export default {
    	data(){
    		return {
    			 userData:{},
    			 pcUrl:"",
    			 appUrl:""
    		}
    	},
    	created() {
    		 this.$store.state.headings=this.$router.history.current.name; //修改标题
    		 this.$store.state.isFooterShow=false; //显示底部导航
    	},
        components:{
            vHeader,
            Cell
        },
        methods:{
        	copyPCUrl:function(){ //复制链接
        		var url = document.getElementById("pcUrl");
			    url.select();
			    document.execCommand("copy");
			    this.$toast('复制成功！');
        	},
        	copyAppUrl:function(){ //编辑
        		this.$toast('待开放.....敬请关注！');
        	}
        },mounted: function () { //加载完成后执行
			var $this = this;
			util.Ajax('/userCentered/getMemeberById', "POST",{},function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.userData = data.member;
						$this.pcUrl = "http://www.kbccoin.cn/member/register?id="+data.member.id
						new QRCode(document.getElementById("myQrcode"), $this.pcUrl);
					} else {
						Toast(data.msg);
					}
				}
			})
			
      	}
    }
</script>
